import React from 'react';
import _ from 'lodash';
import moment from 'moment';
import handleIcon from '@/assets/datang/handleIcon.svg';
import { default as MyChart } from '@/pages/GanSuDaTang/Dashboard/components/chart';
import { fetchDayaheadElectricPriceTrend } from '@/pages/GanSuDaTang/Dashboard/services';

import styles from './index.less';

export default () => {
  const [list, setList] = React.useState([]);

  React.useEffect(() => {
    fetch();
  }, []);

  const fetch = async () => {
    const today = moment().format('YYYY-MM-DD');
    const res = await fetchDayaheadElectricPriceTrend(today);
    const listMap = res?.data || {};
    const temp = Array.from({ length: 96 }, (__, i) => ({
      id: `${i + 1}`.padStart(2, '0'),
      heDong: listMap?.heDong?.[i + 1] || 0,
      heXi: listMap?.heXi?.[i + 1] || 0,
    }));
    setList(temp);
  };

  const getChart = () => ({
    dataset: { source: list, dimensions: ['id', 'heDong', 'heXi'] },
    grid: { top: 24, right: 10, bottom: 40, left: 36 },
    tooltip: {
      show: true,
      confine: true,
      enterable: false,
      trigger: 'axis',
      axisPointer: { type: 'line' },
      backgroundColor: '#071E36',
      borderColor: '#0C5185',
      borderWidth: 1,
      padding: [12, 12],
      textStyle: { fontSize: 12, lineHeight: 20, color: 'rgba(255, 255, 255, 0.60)' },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      nameGap: 8,
      axisLabel: { color: 'rgba(255, 255, 255, 0.9)' },
      axisLine: { onZero: false, lineStyle: { color: 'rgba(255, 255, 255, 0.25)' } },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: { color: 'rgba(255, 255, 255, 0.25)' },
      },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'value',
      name: '元/MWh',
      nameGap: 8,
      nameTextStyle: { fontSize: 12, lineHeight: 17, color: 'rgba(255, 255, 255, 0.6)' },
      axisLabel: { color: 'rgba(255, 255, 255, 0.6)' },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
    },
    legend: {
      data: [
        { name: '河东', itemStyle: { opacity: 0 }, lineStyle: { color: '#18A0FB', width: 3 } },
        { name: '河西', itemStyle: { opacity: 0 }, lineStyle: { color: '#46DADB', width: 3 } },
      ],
      width: '60%',
      top: 2,
      right: 2,
      itemGap: 18,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { fontSize: 12, lineHeight: 12, color: 'rgba(255, 255, 255, 0.9)' },
      padding: 0,
      borderColor: 'rgba(255, 255, 255, 0.6)',
      inactiveColor: 'rgba(255, 255, 255, 0.6)',
      inactiveBorderWidth: 0,
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        showDetail: false,
        brushSelect: false,
        height: 12,
        left: 48,
        bottom: 2,
        right: 10,
        fillerColor: 'rgba(33, 116, 255, 0.2)',
        borderColor: 'rgba(33, 116, 255, 0.3)',
        dataBackground: {
          lineStyle: { opacity: 0 },
          areaStyle: { opacity: 0 },
        },
        selectedDataBackground: {
          lineStyle: { opacity: 0 },
          areaStyle: { opacity: 0 },
        },
        handleIcon: `image://${handleIcon}`,
        handleSize: 16,
        brushSelect: false,
      },
    ],
    series: [
      {
        type: 'line',
        name: '河东',
        symbol: 'none',
        itemStyle: { color: '#18A0FB', lineStyle: { width: 2 } },
        emphasis: { lineStyle: { width: 2 } },
        areaStyle: { opacity: 0.1 },
      },
      {
        type: 'line',
        name: '河西',
        symbol: 'none',
        itemStyle: { color: '#46DADB', lineStyle: { width: 2 } },
        emphasis: { lineStyle: { width: 2 } },
        areaStyle: { opacity: 0.1 },
      },
    ],
  });

  return (
    <div className={styles.container}>
      <MyChart option={getChart()} />
    </div>
  );
};
